<template>
  <div class="IPSourceMaterial">
    <div class="search">
      <div class="my-form">
        <el-date-picker
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-input placeholder="请输入" v-model="input" class="input-with-select">
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option v-for="item of searchFields" :label="item.label" :key="item.value" :value="item.value"></el-option>
          </el-select>
        </el-input>
        <div class="btns">
          <el-button class="search-btn" type="primary" :icon="Search">搜索</el-button>
          <el-button @click="openSenior" type="primary" :icon="!isShowSenior ? ArrowDown : ArrowUp">高级搜索</el-button>
        </div>
      </div>
    </div>

    <div class="senior" v-if="isShowSenior">
      <AdvancedSearchs :searchFields="searchFields" />
    </div>

    <div class="container">
      <div class="btn-group">
        <div class="mark">报文标注<i class="el-icon-star-on"></i></div>
        <div class="origin-download">元数据导出<i class="el-icon-printer"></i></div>
        <div class="file-download">文件导出<i class="el-icon-upload2"></i></div>
      </div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane v-for="item of tabList" :label="item.label" :name="item.name" :key="item.name">
          <div class="table-con">
            <el-table
              v-if="tableHeader && tableHeader.length"
              height="calc(100%)"
              highlight-current-row
              border
              :header-cell-style="elTableStyle.headerCellStyle"
              @expand-change="open = true"
              :data="tableData">
              <el-table-column type="expand" key="expand">
                <template #default="scope">
                  <div class="mail-details" v-if="activeName === 'mail'">
                    <div class="basic-info">
                      <div class="sender">
                        <p class="title">
                          <span>发送方信息</span>
                          <span>好友</span>
                        </p>
                        <p class="normal-data">发送方邮箱：</p>
                        <p class="sender_mail">{{ scope.row.origin_information }}</p>
                        <p class="normal-data">源地址：{{ scope.row.srcip }}</p>
                        <p class="normal-data">源端口：{{ scope.row.srcport }}</p>
                      </div>
                      <div class="receiver">
                        <p class="title">
                          <span>接收方信息</span>
                          <span>好友</span>
                        </p>
                        <div class="normal-data">
                          <p>接收方邮箱：</p>
                          {{ scope.row.target_informatuon }}
                        </div>
                      </div>
                    </div>
                    <div class="text">
                      <p class="text-num"><span>正文长度：</span>{{ getContentLength(scope.row.content) }}</p>
                      <div class="text-num">
                        <span>正文内容：</span>
                        <pre class="text-body" v-html="scope.row.content"></pre>
                      </div>
                    </div>

                    <div class="file-load">
                      <p
                        v-if="scope.row.mail_file"
                        @click="mailLoad(scope.row.mail_file)">
                        @邮件下载
                      </p>

                      <el-descriptions :column="1" border v-for="(fileItem, fileIndex) in scope.row.annex" :key="fileIndex">
                        <el-descriptions-item>
                          <template #label>
                            附件名
                          </template>
                          <span class="file-path" @click="fileLoad(fileItem.path)">{{ getFileName(fileItem.path) }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item v-for="(item, index) in fileItem.file_info" :key="index">
                          <template #label>
                            {{ fieldInfo[index] || index }}
                          </template>
                          {{ item }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                          <template #label>
                            数据来源
                          </template>
                          <span>{{ scope.row.fileName }}</span>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </div>

                  <div
                    v-if="activeName === 'tftp' ||
                    activeName === 'uftp' ||
                    activeName === 'uftp4' ||
                    activeName === 'uftp5' ||
                    activeName === 'http' ||
                    activeName === 'ospf' ||
                    activeName === 'sctp' ||
                    activeName === 'rtmpt'"
                    >
                    <ShowBox
                      :filetype="scope.row.filetype"
                      :fileurl="scope.row.fileurl"
                      :source="scope.row.source"
                      :desc="scope.row.dsc"
                      :file_info="scope.row.file_info"
                      :protocol="activeName" />
                  </div>

                  <div v-if="activeName === '2'">
                    <ShowData :dataType="scope.row.data_type" :open="open" />
                  </div>

                  <div v-if="activeName === '3'">
                    <audio controls>
                      <source :src="testVoice" type="audio/wav" />
                    </audio>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                type="selection"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column
                v-for="item of tableHeader"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop"
                show-overflow-tooltip
                align="center"
                :min-width="item.width">
                <template #default="scope">
                  <span class="link"
                    v-if="item.prop === 'upload_file' ||
                    item.prop === 'download_file' ||
                    item.prop === 'fileName'"
                    @click="tableFileDownload(item.prop, scope.row)">
                    {{scope.row[item.prop]}}
                  </span>
                  <span v-else>
                    {{scope.row[item.prop]}}
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination">
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              :total="total">
            </el-pagination>              
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  Search,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'

import AdvancedSearchs from '@/components/AdvancedSearchs/advanced-searchs.vue'
import ShowBox from './ShowBox.vue'
import ShowData from './ShowData.vue'
import elTableStyle from "../../../config/third-plugins/element/elTable";

import testVoice from './test.wav'

const route = useRoute()

// 搜索
const input = ref()
const select = ref()
const searchFields = ref(<any>[
  {
    label: '源IP地址',
    value: 'origin_ip'
  },
  {
    label: '源信息',
    value: 'origin_info'
  },
  {
    label: `目的信息`,
    value: 'target_info'
  },
  {
    label: '信息描述',
    value: 'desc'
  }
])
const isShowSenior = ref(false)

// tab切换
const activeName = ref('mail')
const tabList = ref(<any>[
  {
    label: '邮件',
    name: 'mail'
  },
  {
    label: 'tftp',
    name: 'tftp'
  },
  {
    label: 'uftp',
    name: 'uftp'
  },
  {
    label: 'uftp4',
    name: 'uftp4'
  },
  {
    label: 'uftp5',
    name: 'uftp5'
  },
  {
    label: '上网',
    name: 'http'
  },
  {
    label: 'ospf',
    name: 'ospf'
  },
  {
    label: 'sctp',
    name: 'sctp'
  },
  {
    label: 'rtmpt',
    name: 'rtmpt'
  }
  // {
  //   label: 'Web邮件',
  //   name: '2'
  // },
  // {
  //   label: '语音',
  //   name: '3'
  // },
  // {
  //   label: '文件',
  //   name: '4'
  // },
  // {
  //   label: '上网',
  //   name: '5'
  // },
  // {
  //   label: '口令',
  //   name: '6'
  // },
  // {
  //   label: '证书',
  //   name: '7'
  // }
])

// 表格
const tableData = ref(<any>[])
const currentPage = ref(1)
const total = ref(0)
const tableHeader = ref(<any>[])
const open = ref(false)
const fieldInfo:any = {
  pages: '页数',
  filetype: '附件类型',
  author: '作者'
}

// 打开/关闭高级搜索
const openSenior = () => {
  isShowSenior.value = !isShowSenior.value
}

// tab点击切换
const handleClick = (tab:any) => {
  tableData.value = []
  tableHeader.value = []
  activeName.value = tab.props.name
  init(activeName.value, true)
}

// 数据初始化
const init = (type:string, isClick?:boolean) => {
  switch (type) {
    case 'mail':
      nextTick(() => {
        tableHeader.value = [
          { label: '源地址', prop: 'srcip', width: '8%' },
          { label: `目的地址`, prop: 'dstip', width: '8%' },
          { label: '源端口', prop: 'srcport', width: '8%' },
          { label: `目的端口`, prop: 'dstport', width: '8%' },
          { label: '源信息', prop: 'origin_information', width: '10%', align: 'center' },
          { label: `目的信息`, prop: 'target_informatuon', width: '10%', align: 'center' },
          { label: '源文件下载', prop: 'fileName', width: '10%', align: 'center' },
          { label: '数据来源', prop: 'source', width: '8%' },
          { label: '信息描述', prop: 'dsc', align: 'center', width: '20%' }
        ]
      })
      break

    case '2':
      nextTick(() => {
        tableHeader.value = [
          { label: '发件人', prop: 'sender' },
          { label: '收件人', prop: 'getter' },
          { label: '手段来源', prop: 'source_means' },
          { label: '手段来源记录id', prop: 'source_means_id', width: '120px' },
          { label: '手段数据文件名', prop: 'source_data_name', width: '120px' },
          { label: '手段数据生产时间', prop: 'source_data_time', width: '140px' },
          { label: '数据来源', prop: 'data_source' },
          { label: '会话id', prop: 'session_id' },
          { label: '源IP地址', prop: 'origin_ip_address' },
          { label: '源IP端口', prop: 'origin_ip_port' },
          { label: '目的IP地址', prop: 'target_ip_address', width: '90px' },
          { label: '目的IP端口', prop: 'target_ip_port', width: '90px' }
        ]
      })

      break

    case 'uftp':
    case 'tftp':
    case 'uftp4':
    case 'uftp5':
    case 'sctp':
    case 'rtmpt':
      nextTick(() => {
        tableHeader.value = [
          { label: '源地址', prop: 'srcip', width: '8%' },
          { label: `目的地址`, prop: 'dstip', width: '8%' },
          { label: '源端口', prop: 'srcport', width: '8%' },
          { label: `目的端口`, prop: 'dstport', width: '8%' },
          { label: '源文件下载', prop: 'fileName', width: '10%', align: 'center' },
          { label: '数据来源', prop: 'source', width: '8%' },
          { label: '信息描述', prop: 'dsc', align: 'center', width: '30%' }
        ]
      })
      break

    case 'ospf':
      nextTick(() => {
        tableHeader.value = [
          { label: '源地址', prop: 'srcip', width: '8%' },
          { label: `目的地址`, prop: 'dstip', width: '8%' },
          { label: '源文件下载', prop: 'fileName', width: '10%', align: 'center' },
          { label: '数据来源', prop: 'source', width: '10%' },
          { label: '信息描述', prop: 'dsc', align: 'center', width: '30%' }
        ]
      })
      break

    case 'http':
      nextTick(() => {
        tableHeader.value = [
          { label: '源地址', prop: 'srcip', width: '8%' },
          { label: '目的地址', prop: 'dstip', width: '8%' },
          { label: '源端口', prop: 'srcport', width: '8%' },
          { label: '目的端口', prop: 'dstport', width: '8%' },
          { label: '源文件下载', prop: 'fileName', width: '10%', align: 'center' },
          { label: '数据来源', prop: 'source', width: '8%' },
          { label: '信息描述', prop: 'dsc', align: 'center', width: '30%' }
        ]
      })
      break
  }

  if (route.query.type && route.query.id && !isClick) {
    getTargetData()
  } else {
    getTableData(type)
  }
}

// 获取对应元数据的素材数据
const getTargetData = () => {
  /* eslint-disable */
  $ajax.get('linkfiles', {
    'filters[type][$eq]': route.query.type,
    'filters[id][$eq]': route.query.id,
    populate: '*'
  }).then(res => {
    const { data, meta } = res
    total.value = meta.pagination.total
    switch (route.query.type) {
      case 'mail':
        tableData.value = data.map((i:any) => {
          let annexTemp = []
          if (i.attributes.metadata && i.attributes.metadata.length) {
            annexTemp = i.attributes.metadata.map((j:any) => {
              const item:any = {
                file_info: {},
                path: ''
              }
              for (const key in j) {
                if (key === 'path') {
                  item[key] = j[key]
                } else {
                  item.file_info[key] = j[key]
                }
              }
              return item
            })
          }
          return {
            srcip: i.attributes.flow.data.attributes.srcip || '-',
            dstip: i.attributes.flow.data.attributes.dstip || '-',
            srcport: i.attributes.flow.data.attributes.srcport || '-',
            dstport: i.attributes.flow.data.attributes.dstport || '-',

            origin_information: i.attributes.person1.data ? i.attributes.person1.data.attributes.email : '-', // 源信息
            target_informatuon: i.attributes.person2.data ? i.attributes.person2.data.attributes.email : '-', // 目标信息
            dsc: i.attributes.desc, // 信息描述

            content: !i.attributes.flow.data.attributes.last_layer ? // 邮件内容
            '-' : !i.attributes.flow.data.attributes.last_layer.email_content ?
            '-' : i.attributes.flow.data.attributes.last_layer.email_content,

            file: !i.attributes.flow.data.attributes.last_layer ? // 附件下载路径
            [] : !i.attributes.flow.data.attributes.last_layer.attachment_file_path ?
            [] : i.attributes.flow.data.attributes.last_layer.attachment_file_path,

            path: i.attributes.linkfile, // 邮件下载路径

            fileName: getFileName(i.attributes.linkfile),

            src_part: !i.attributes.flow.data.attributes.tcp ? // 源端口
            '-' : !i.attributes.flow.data.attributes.tcp.srcport ?
            '-' : i.attributes.flow.data.attributes.tcp.srcport,

            annex: annexTemp,

            source: i.attributes.flow.data.attributes.source ? getFileName(i.attributes.flow.data.attributes.source) : '-'
          }
        })
      break

      case 'uftp':
      case 'tftp':
      case 'uftp4':
      case 'uftp5':
      case 'ospf':
      case 'sctp':
      case 'rtmpt':
        tableData.value = data.map((i:any) => {
          let annexTemp:any = {}
          if (i.attributes.metadata) {
            annexTemp.filetype = i.attributes.metadata.filetype
            annexTemp.path = i.attributes.linkfile
          }
          return {
            srcip: i.attributes.flow.data.attributes.srcip || '-',
            dstip: i.attributes.flow.data.attributes.dstip || '-',
            srcport: i.attributes.flow.data.attributes.srcport || '-',
            dstport: i.attributes.flow.data.attributes.dstport || '-',

            dsc: i.attributes.desc, // 信息描述

            src_part: !i.attributes.flow.data.attributes.udp ? // 源端口
            '-' : !i.attributes.flow.data.attributes.udp.srcport ?
            '-' : i.attributes.flow.data.attributes.udp.srcport,

            annex: annexTemp,

            fileName: getFileName(i.attributes.linkfile),

            path: i.attributes.linkfile,

            filetype: i.attributes.metadata.filetype,
            fileurl: i.attributes.linkfile,
            file_info: i.attributes.metadata,
            
            source: i.attributes.flow.data.attributes.source ? getFileName(i.attributes.flow.data.attributes.source) : '-'
          }
        })
      break

      case 'http':
        tableData.value = data.map((i:any) => {
          let annexTemp:any = {}
          if (i.attributes.metadata) {
            annexTemp.filetype = i.attributes.metadata.filetype
            annexTemp.path = i.attributes.linkfile
          }
          return {
            srcip: i.attributes.flow.data.attributes.srcip || '-',
            dstip: i.attributes.flow.data.attributes.dstip || '-',
            srcport: i.attributes.flow.data.attributes.srcport || '-',
            dstport: i.attributes.flow.data.attributes.dstport || '-',

            dsc: i.attributes.desc, // 信息描述

            src_part: !i.attributes.flow.data.attributes.udp ? // 源端口
            '-' : !i.attributes.flow.data.attributes.udp.srcport ?
            '-' : i.attributes.flow.data.attributes.udp.srcport,

            annex: annexTemp,

            fileName: getFileName(i.attributes.linkfile),

            path: i.attributes.linkfile,

            filetype: i.attributes.metadata.filetype,
            fileurl: i.attributes.linkfile,
            file_info: i.attributes.metadata,

            source: i.attributes.flow.data.attributes.source ? getFileName(i.attributes.flow.data.attributes.source) : '-'
          }
        })
      break
    }
  })
}

// 获取对应类型素材表数据
const getTableData = (type:string) => {
  /* eslint-disable */
  $ajax.get('linkfiles', {
    'filters[type][$eq]': type,
    'pagination[page]': currentPage.value,
    'pagination[pageSize]': 20,
    populate: '*'
  }).then(res => {
    const { data, meta } = res
    total.value = meta.pagination.total
    switch (type) {
      case 'mail':
        tableData.value = data.map((i:any) => {
          let annexTemp = []
          if (i.attributes.metadata && i.attributes.metadata.length) {
            annexTemp = i.attributes.metadata.map((j:any) => {
              const item:any = {
                file_info: {},
                path: ''
              }
              for (const key in j) {
                if (key === 'path') {
                  item[key] = j[key]
                } else {
                  item.file_info[key] = j[key]
                }
              }
              return item
            })
          }
          return {
            srcip: i.attributes.flow.data.attributes.srcip || '-',
            dstip: i.attributes.flow.data.attributes.dstip || '-',
            srcport: i.attributes.flow.data.attributes.srcport || '-',
            dstport: i.attributes.flow.data.attributes.dstport || '-',

            origin_information: i.attributes.person1.data ? i.attributes.person1.data.attributes.email : '-', // 源信息
            target_informatuon: i.attributes.person2.data ? i.attributes.person2.data.attributes.email : '-', // 目标信息
            dsc: i.attributes.desc, // 信息描述

            content: !i.attributes.flow.data.attributes.last_layer ? // 邮件内容
            '-' : !i.attributes.flow.data.attributes.last_layer.email_content ?
            '-' : i.attributes.flow.data.attributes.last_layer.email_content,

            file: !i.attributes.flow.data.attributes.last_layer ? // 附件下载路径
            [] : !i.attributes.flow.data.attributes.last_layer.attachment_file_path ?
            [] : i.attributes.flow.data.attributes.last_layer.attachment_file_path,

            path: i.attributes.linkfile, // 邮件下载路径

            fileName: getFileName(i.attributes.linkfile),

            src_part: !i.attributes.flow.data.attributes.tcp ? // 源端口
            '-' : !i.attributes.flow.data.attributes.tcp.srcport ?
            '-' : i.attributes.flow.data.attributes.tcp.srcport,

            annex: annexTemp,

            source: i.attributes.flow.data.attributes.source ? getFileName(i.attributes.flow.data.attributes.source) : '-'
          }
        })
      break

      case 'uftp':
      case 'tftp':
      case 'uftp4':
      case 'uftp5':
      case 'ospf':
      case 'sctp':
      case 'rtmpt':
        tableData.value = data.map((i:any) => {
          let annexTemp:any = {}
          if (i.attributes.metadata) {
            annexTemp.filetype = i.attributes.metadata.filetype
            annexTemp.path = i.attributes.linkfile
          }
          return {
            srcip: i.attributes.flow.data.attributes.srcip || '-',
            dstip: i.attributes.flow.data.attributes.dstip || '-',
            srcport: i.attributes.flow.data.attributes.srcport || '-',
            dstport: i.attributes.flow.data.attributes.dstport || '-',

            dsc: i.attributes.desc, // 信息描述

            src_part: !i.attributes.flow.data.attributes.udp ? // 源端口
            '-' : !i.attributes.flow.data.attributes.udp.srcport ?
            '-' : i.attributes.flow.data.attributes.udp.srcport,

            annex: annexTemp,

            fileName: getFileName(i.attributes.linkfile),

            path: i.attributes.linkfile,

            filetype: i.attributes.metadata.filetype,
            fileurl: i.attributes.linkfile,
            file_info: i.attributes.metadata,

            source: i.attributes.flow.data.attributes.source ? getFileName(i.attributes.flow.data.attributes.source) : '-'
          }
        })
      break

      case 'http':
        tableData.value = data.map((i:any) => {
          let annexTemp:any = {}
          if (i.attributes.metadata) {
            annexTemp.filetype = i.attributes.metadata.filetype
            annexTemp.path = i.attributes.linkfile
          }
          return {
            srcip: i.attributes.flow.data.attributes.srcip || '-',
            dstip: i.attributes.flow.data.attributes.dstip || '-',
            srcport: i.attributes.flow.data.attributes.srcport || '-',
            dstport: i.attributes.flow.data.attributes.dstport || '-',

            dsc: i.attributes.desc, // 信息描述

            annex: annexTemp,

            fileName: getFileName(i.attributes.linkfile),

            path: i.attributes.linkfile,

            filetype: i.attributes.metadata.filetype,
            fileurl: i.attributes.linkfile,
            file_info: i.attributes.metadata,

            source: i.attributes.flow.data.attributes.source ? getFileName(i.attributes.flow.data.attributes.source) : '-'
          }
        })
      break
    }
  })
}

// 分页
const handleCurrentChange = (val:any) => {
  currentPage.value = val
  getTableData(activeName.value)
}

// 截取文件名
const getFileName = (value:string) => {
  if (value) {
    let index = value.lastIndexOf('\\')
    if (index !== -1) {
      return value.substring(index + 1)
    } else {
      index = value.lastIndexOf('/')
      return value.substring(index + 1)
    }
  }
}


// 获取邮件内容的真实长度
const getContentLength = (value:string) => {
  if (value) {
    /* eslint-disable */
    const temp = value.replace(/(\t|\r|\n|\s|\b|\f|\"|\u)/ig, '').replace(/(\\)/ig, '')
    return temp.length
  } else {
    return 0
  }
}

// 文件下载
const mailLoad = (file:any) => {
  if (import.meta.env.MODE === 'development') {
    const fileName = getFileName(file)
    const a_link:any = document.createElement('a')
    fetch('http://192.168.5.63:1337/' + file).then(res => res.blob()).then(blob => { 
      a_link.href = URL.createObjectURL(blob)
      a_link.download = fileName
      document.body.appendChild(a_link)
      a_link.click()
      a_link.remove()
    })
  } else {
      const fileName = getFileName(file)
      const a_link:any = document.createElement('a')
      fetch(file).then(res => res.blob()).then(blob => { 
        a_link.href = URL.createObjectURL(blob)
        a_link.download = fileName
        document.body.appendChild(a_link)
        a_link.click()
        a_link.remove()
    })
  }
}
const fileLoad = (fileUrl:string) => {
  if (import.meta.env.MODE === 'development') {
    const fileName = getFileName(fileUrl)
    const a_link:any = document.createElement('a')
    fetch('http://192.168.5.63:1337/' + fileUrl).then(res => res.blob()).then(blob => { 
      a_link.href = URL.createObjectURL(blob)
      a_link.download = fileName
      document.body.appendChild(a_link)
      a_link.click()
      a_link.remove()
    })
  } else {
    const fileName = getFileName(fileUrl)
    const a_link:any = document.createElement('a')
    fetch(fileUrl).then(res => res.blob()).then(blob => { 
      a_link.href = URL.createObjectURL(blob)
      a_link.download = fileName
      document.body.appendChild(a_link)
      a_link.click()
      a_link.remove()
    })
  }
}
// 表格里的下载，因为可能出现一个表格多种文件下载，可利用prop区分
const tableFileDownload = (prop:any, data:any) => {
  switch (prop) {
    case 'fileName':
      mailLoad(data.path)
    break
  }
}

onMounted(() => {
  init(activeName.value)
})
</script>

<style scoped lang="scss">
.IPSourceMaterial {
  position: relative;
  .search {
    display: flex;
    margin-bottom: 16px;
    .search-btn {
      margin-left: 12px;
    }
    .my-form {
      display: flex;
      align-items: center;
      :deep(.el-date-editor) {
        margin-right: 10px;
      }
      :deep(.input-with-select) {
        width: 500px;
      }
      :deep(.el-input-group__prepend) {
        background-color: #fff;
        width: 80px;
      }
    }
  }

  .btns {
    margin-left: 10px;
  }

  .senior {
    min-height: 200px;
  }

  .link {
    color: #409eff;
    text-decoration: underline;
    cursor: pointer;
  }

  .container {
    height: calc(100% - 50px);
    position: relative;
    :deep(.el-tabs--border-card) {
      height: 100%;
      box-sizing: border-box;
    }
    :deep(.el-tabs--border-card>.el-tabs__content) {
      padding: 0 !important;
      height: calc(100% - 40px);
      background-color: #fff;
      box-sizing: border-box;
    }
    :deep(.el-tab-pane) {
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px 20px 10px 20px;
      box-sizing: border-box;
    }
    .table-con {
      height: calc(100vh - 282px);
      .el-icon-more::before {
        position: absolute;
        right: -4px;
        top: 12px;
        z-index: 9999;
        transform: rotate(90deg);
        color: #409eff;
        cursor: pointer;
        background-color: #fff;
      }
      :deep(.el-pagination) {
        align-self: end;
        margin: 15px 0;
      }
      .mail-details {
        // height: 400px;
        display: flex;
        padding: 5px 20px;
        box-sizing: border-box;
        .basic-info {
          display: flex;
          .sender {
            margin-right: 30px;
            padding: 15px 0;
            box-sizing: border-box;
          }
          .title {
            span:nth-child(1) {
              font-weight: 700;
              color: #5775a7;
            }
            span:nth-child(2) {
              display: inline-block;
              border: 1px solid #409eff;
              line-height: 12px;
              padding: 2px 3px 3px 2px;
              border-radius: 2px;
              color: #409eff;
              margin-left: 5px;
              font-weight: 700;
              font-size: 12px;
            }
          }
          .normal-data {
            color: #7c97ac;
            font-size: 13px;
            margin-top: 8px;
            li {
              margin-top: 5px;
            }
          }
          .sender_mail {
            color: #7c97ac;
            font-size: 13px;
          }
          .receiver {
            border-right: 1px solid #7095ce;
            padding: 15px 20px 15px 0;
            box-sizing: border-box;
          }
        }

        .text {
          // flex: 1;
          min-width: 300px;
          margin-left: 20px;
          padding: 15px 0px 15px 0;
          box-sizing: border-box;
          margin-right: 15px;
          .text-num {
            color: #7c97ac;
            span {
              color: #5775a7;
              font-weight: 700;
            }
          }
          .text-body {
            width: 100%;
            // height: 310px;
            // overflow-y: auto;
          }
        }

        .file-load {
          flex: 1;
          cursor: pointer;
          padding-left: 20px;
          color: #409eff;
          border-left: 1px solid #7095ce;
          table {
            width: 100%;
            th, tr {
              border: 1px solid #ebeef5;
              width: 50%;
              text-align: center;
              padding: 10px 15px;
              box-sizing: border-box;
            }
            th {
              color: #979b9f;
              // height: 28px;
              // line-height: 28px;
            }
            .file-info {
              text-align: left !important;
            }
          }
          .load-operation {
            color: #409eff;
          }
        }
      }
    }
    .btn-group {
      position: absolute;
      display: flex;
      right: 20px;
      top: 12px;
      z-index: 9999;
      div {
        margin-left: 10px;
        font-size: 12px;
        color: #409eff;
        border: 1px solid #409eff;
        border-radius: 3px;
        line-height: 12px;
        padding: 0px 10px 1px 10px;
        cursor: pointer;
      }
      .el-icon-star-on::before {
        font-size: 15px;
        position: relative;
        top: 1px;
        left: 1px;
      }
      .el-icon-printer::before {
        font-size: 14px;
        position: relative;
        top: 1px;
        left: 1px;
      }
      .el-icon-upload2 {
        font-size: 14px;
        position: relative;
        top: 1px;
        left: 1px;
      }
    }
  }
  :deep(.el-descriptions) {
    margin-bottom: 15px;
    .el-descriptions-item__label.is-bordered-label {
      width: 100px;
      text-align: center;
    }
  }
  .file-path {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
  }

  :deep(.el-table th.el-table__cell) {
    .cell {
      border-right: 1px solid #ccc;
    }
  }
  :deep(.el-table th.el-table__cell:nth-last-child(2)) {
    .cell {
      border-right: none;
    }
  }
  :deep(.el-table--border) {
    border: none;
  }
  :deep(.el-table--border .el-table__cell) {
    border: none;
    border-bottom: 1px solid #ebeef5;
  }
  :deep(.el-table--border::after) {
    background-color: #fff;
  }
  :deep(.el-table__border-left-patch) {
    background-color: #fff;
  }

  .pagination {
    padding: 12px 0 5px 0;
    align-self: flex-end;
  }
}
</style>